<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset/reset.css" />
	</head>
	<style type="text/css">
		#canvasDesk {
			border: 1px solid red;
		}
	</style>

	<body>
		<canvas id="canvasDesk"></canvas>
	</body>
	<script type="text/javascript">

		var num = 100; //生成多少个圆
		var arcLineWidth = 0; //圆lineWidth 暂未想到好办法放置 姑且先放这
		
		var canvasDesk = document.querySelector('#canvasDesk');
		canvasDesk.width = 1280;
		canvasDesk.height = 720;
		var canvasContext = canvasDesk.getContext('2d');
		
		//圆
		function DrawRound(x, y, r, starAngle, endAngle, color = 'red', lineWidth = 0,strokeColor = 'black') {
				this.x = x,
				this.y = y,
				this.r = r,
				this.starAngle = starAngle,
				this.endAngle = endAngle,
				this.color = color
				this.lineWidth = lineWidth,
				this.strokeColor = strokeColor
		};

		DrawRound.prototype = {
			drawRound: function() {
				console.log(canvasContext);
				canvasContext.beginPath();
				canvasContext.arc(this.x, this.y, this.r, this.starAngle, this.endAngle);
				canvasContext.fillStyle = this.color;
				canvasContext.fill();
				if(this.lineWidth) {
					canvasContext.lineWidth = this.lineWidth;
					canvasContext.strokeStyle = this.strokeColor;
					canvasContext.stroke();
				}
				canvasContext.closePath();
			}

		}

		function random(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}

		//生成point和r
		function rectF() {
			let x = random(1, canvasDesk.width-1);
			let y = random(1, canvasDesk.height-1);
			let r = random(1, canvasDesk.width > canvasDesk.height ? canvasDesk.height / 2 : canvasDesk.width / 2);
			return {
				'x': x,
				'y': y,
				'r': r
			};
		}

		for(let i = 0; i < num; i++) {
			//边界判断
			var rectFram;
			while(1) {
				rectFram = rectF();
				console.log(rectFram);
				if((rectFram.x + rectFram.r + arcLineWidth/2 <= canvasDesk.width ? true : false) && (rectFram.y + rectFram.r + arcLineWidth/2 <= canvasDesk.height ? true : false) && ((rectFram.x >= rectFram.y ? rectFram.y : rectFram.x) >= rectFram.r + arcLineWidth/2 ? true : false)) {
					break;
				}
			}
			let draw = new DrawRound(rectFram.x, rectFram.y, rectFram.r, 0, Math.PI * 2, `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`,arcLineWidth);
			draw.drawRound();
		}
	</script>

</html>